<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
    <script>
      if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
        }, false);
      }
      if(!window.Promise) {
        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
      }
    </script>
    <style>
    #toTopBtn{
      position: fixed;
      width: 1.3rem;
      height: 1.3rem; 
      right: .3rem;
      bottom: 1.2rem; 
      background-color: #B01615;
      border-radius: 3px;
      color: #FFF;
      text-align: center;
      line-height: 1.3rem;
    }
    </style>
    <title>React App</title><!--手机中国-->
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <a href="javascript:;" id="toTopBtn" style="display:none;"><i class="fa fa-arrow-up"></i></a>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script>

      function PageEventProcess(rootFontSize,windowWidth){
        var fontSize = rootFontSize;
        //PageEventProcess传入参数表示对于设计稿宽度windowWidth时预设html字号为rootFontSize px，App.less中定义的@baseRem数值要与rootFontSize一致
        this.baseFontSize = rootFontSize;
        this.baseWindowWidth = windowWidth;

        this.curIndex = '';//记录当前导航对应的类名，以免页面滚动过程非常频繁触发动画
        //设置html根节点字号，以便进行rem布局
        this.setRootFontSize = function(){
          fontSize = window.innerWidth/this.baseWindowWidth*this.baseFontSize;
          if(window.innerWidth > 960){
            fontSize = 960/this.baseWindowWidth*this.baseFontSize;
          }
          document.documentElement.style.fontSize = fontSize + 'px';
        }

        this.reset = function(){
          this.curIndex = '';
          this.showToTopBtn('hide');
        }
        //翻滚顶部固定导航
        this.topBarScroll = function(){        
            var documentScrollTop = $(document).scrollTop(),
            fixedWrapper = document.getElementsByClassName('fixed-top-wrapper')[0],
            secNews = document.getElementsByClassName('news')[0],
            secAudio = document.getElementsByClassName('audio')[0],
            secHardwares = document.getElementsByClassName('hardwares')[0],
            secNewPhone = document.getElementsByClassName('new-phone')[0],
            secSoftwares = document.getElementsByClassName('softwares')[0];

            var scrollSpace = document.getElementsByClassName('fixed-bar-top')[0].clientHeight;
            if(documentScrollTop < secNews.offsetTop){
              if(this.curIndex == '' || this.curIndex != 'nav'){
                $(fixedWrapper).animate({top:'0'});
                this.curIndex = 'nav';
              }
            }
            else if(documentScrollTop >= secNews.offsetTop && documentScrollTop < secAudio.offsetTop){
              if(this.curIndex == '' || this.curIndex != 'news'){
                $(fixedWrapper).animate({top:-scrollSpace + 'px'});
                this.curIndex = 'news';
              }
            }
            else if(documentScrollTop >= secAudio.offsetTop && documentScrollTop < secHardwares.offsetTop){
              if(this.curIndex == '' || this.curIndex != 'audio'){
                $(fixedWrapper).animate({top:-2*scrollSpace + 'px'});
                this.curIndex = 'audio';
              }
            }
            else if(documentScrollTop >= secHardwares.offsetTop && documentScrollTop < secNewPhone.offsetTop){
              if(this.curIndex == '' || this.curIndex != 'hardwares'){
                $(fixedWrapper).animate({top:-3*scrollSpace + 'px'});
                this.curIndex = 'hardwares';
              }
            }
            else if(documentScrollTop >= secNewPhone.offsetTop && documentScrollTop < secSoftwares.offsetTop){
              if(this.curIndex == '' || this.curIndex != 'new-phone'){
                $(fixedWrapper).animate({top:-4*scrollSpace + 'px'});
                this.curIndex = 'new-phone';
              }
            }
            else if(documentScrollTop >= secSoftwares.offsetTop){
              if(this.curIndex == '' || this.curIndex != 'softwares'){
                $(fixedWrapper).animate({top:-5*scrollSpace + 'px'});
                this.curIndex = 'softwares';
              }
            }
          }
        this.showToTopBtn = function(style){
          if(style){
            if(style == 'show'){
              $("#toTopBtn").show();
            }
            else if(style == 'hide'){
              $("#toTopBtn").hide();
            }
          }
          else{
            if($(document).scrollTop() > 2*fontSize){
              $("#toTopBtn").show();
            }
            else{
              $("#toTopBtn").hide();
            }
          }
        }
      }

      
      //实例化页面事件工具类实例
      var pageEventProcess = new PageEventProcess(30,424);


      
      $(window).resize(function(){
        pageEventProcess.setRootFontSize();
        pageEventProcess.topBarScroll();
        pageEventProcess.showToTopBtn();
      })

      $(window).scroll(function(){
        try {
          pageEventProcess.topBarScroll();
          pageEventProcess.showToTopBtn();
        } catch (error) {
          console.log(error)
          /*目前发现的问题是，使用router打开另一个页面，回退的时候，fixed的顶部导航top样式没有保留，
          而是首页似乎有一个重新渲染的过程，但是pageEventProcess.curIndex属性确保持原值，而页面滚动值也是原有的，
          这样导致了fixed顶部导航的top没有重新被设置成预期的值，所以需要reset值，以便重新设置*/
          pageEventProcess.reset();
        }        
      })
      $(function(){
        pageEventProcess.setRootFontSize();
        pageEventProcess.topBarScroll();
        pageEventProcess.showToTopBtn();
        $("#toTopBtn").click(function(){
          $("html,body").animate({"scrollTop":0})
        })
      })
    </script>
  </body>
</html>
